﻿@using nanoCMS.Blog
@using nanoCMS.Blog.Resources
@using nanoCMS.Blog.WebUI.Models.ViewModels
@using nanoCMS.Core.WebProviders.HtmlHelpers
@model EditBlogPostVM
@{
    Layout = null;
}
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('textarea').wysiwyg({});
    });
</script>
<article class="nc-admin">
    <header>Some title</header>
    @using (Ajax.BeginForm("Save", "BlogPost", new { area = "Blog" }, new AjaxOptions { UpdateTargetId = "validationSummaryBlog", OnSuccess = "ajaxFormSuccess" }, new { }))
    {    
        <div id="validationSummaryBlog" class="validationSummary">
        </div>
        
        <input type="hidden" name="BlogPostID" value="@Model.BlogPostVM.BlogPostID" />
        <input type="hidden" name="returnUrl" value="@ViewBag.ReturnUrl"/>
        
        <fieldset>
            <label>@Translation.Title</label>
            <input type="text" name="Title" value="@Model.BlogPostVM.Title" />
        </fieldset>

        <fieldset>
            <label>@Translation.Summary</label>
            <textarea id="summary" name="Summary" class="wysiwyg">@Model.BlogPostVM.Summary</textarea>
            <div id="summary_upload_container">
                <div id="info">
                    -- no runtime (html5, flash, silverlight) for image upload supported --
                </div>
                <br />
                <a id="summary_upload_button" href="#">[Upload file]</a>
            </div>
        </fieldset>
        
        <fieldset>
            <label>@Translation.Content</label>
            <textarea id="content" name="Content" class="wysiwyg">@Model.BlogPostVM.Content</textarea>
            <div id="content_upload_container">
                <div id="info">
                    -- no runtime (html5, flash, silverlight) for image upload supported --
                </div>
                <br />
                <a id="content_upload_button" href="#">[Upload file]</a>
            </div>
        </fieldset>
        
        <fieldset>
            @foreach (var item in Model.TenantCategories)
            {
                <label>@item.Value</label>
                <input type="checkbox" name="BlogInCategories" value="@item.Key"/>
            }
        </fieldset>
        <fieldset>
            <label>@Translation.UserActions</label>
            <input type="submit" value="@Translation.Save"/>
        </fieldset>
    }
</article>
<!-- Third party script for BrowserPlus runtime (Google Gears included in Gears runtime now) -->
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
<script type="text/javascript">
    function createUploader(container, browseButton, wysifygId) {
        var uploader = new plupload.Uploader({
            runtimes: 'gears,html5,flash,silverlight,browserplus',
            browse_button: browseButton,
            container: container,
            max_file_size: '1mb',
            autostart: true,
            url: '@Url.Action("UploadImage", "BlogPost", new { area = "Blog" })',
            flash_swf_url: '@Html.UrlInnerHome()' + 'Content/plupload/plupload.flash.swf',
            silverlight_xap_url: '@Html.UrlInnerHome()' + 'Content/plupload/plupload.flash.swf',
            filters: [
			    { title: "Image files", extensions: "jpg,gif,png" }
		    ],
            multiple_queues: false
        });

        uploader.bind('Init', function (up, params) {
            jQuery('#' + container + '> #info').html("");
        });

        uploader.init(); // start before the rest (plupload, otherwise doesn't work) 

        uploader.bind('FilesAdded', function (up, files) {
            jQuery.each(files, function (i, file) {
                jQuery('#' + container + '> #info').html('<div id="' + file.id + '">' +
                    file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
                    '</div>');
            });
            up.refresh(); // Reposition Flash/Silverlight
            up.start();
        });

        uploader.bind('UploadProgress', function (up, file) {
            jQuery("#" + container + " > #" + file.id + " b").html(file.percent + "%");
        });

        uploader.bind('Error', function (up, err) {
            jQuery('#' + container + '> #info').html("<div>Error: " + err.code +
			        ", Message: " + err.message + (err.file ? ", File: " + err.file.name : "") +
			"</div>");

            up.refresh(); // Reposition Flash/Silverlight
        });

        uploader.bind('FileUploaded', function (up, file, params) {
            jQuery("#" + container + " > #" + file.id + " b").html("100%");
            //            alert(params.response);
            var response = jQuery.parseJSON(params.response);
            if (response.result == "ok") {
                $('#' + wysifygId).wysiwyg('insertImage', response.imageUrl);
            } else {
                alert(response.message);
            }
        });

        return uploader;
    }

    jQuery(function () {
        // create uploader
        var summary_uploader = createUploader("summary_upload_container", "summary_upload_button", "summary");
        var content_uploader = createUploader("content_upload_container", "content_upload_button", "content");
    });
</script>
